<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>

<html>

<%@page import="domain.*"%>
<%@page import="java.util.*"%>

<% 
	String scheduleId = (String) request.getAttribute("scheduleId");
%>
<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<link rel="icon" type="image/gif" href="./resources/images/animated_favicon1.gif">
	<!-- link rel="shortcut icon" href="favicon.ico" -->
	
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="./resources/tileoverlay_uncompressed.js"></script>
<script type="text/javascript" src="./resources/center.js"></script>
<script type="text/javascript" src="./resources/googleAPI.js"></script>
<script type="text/javascript" src="./resources/traffyAPI.js"></script>

<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0px;
	padding: 0px
}

#map_canvas {
	height: 100%
}
</style>

</script>
<title>Schedule On Map</title>
<script type="text/javascript">

var directionsService = new google.maps.DirectionsService();
	
	function init() {
		var getTraffic = "traffy"; //traffy or google
		createMap(13.711428, 100.594103, "map_canvas", getTraffic);
		directionsDisplay.setPanel(document.getElementById("directionsPanel"));

		google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
		    computeTotalDistance(directionsDisplay.directions);
		  });

		
		// GET INCIDENTS
		getIncidents();
		
		// GET VMS
		getVMS();

		// GET CCTV
		getCCTV();

		// GET POS
		getPOS();
		
		//document.getElementById("directionsPanel").style.visibility = 'hidden';
	}
	
	function computeTotalDistance(result) {
	  var total = 0;
	  var myroute = result.routes[0];
	  for (i = 0; i < myroute.legs.length; i++) {
	    total += myroute.legs[i].distance.value;
	  }
	  total = total / 1000.
	  document.getElementById("total").innerHTML = total + " km";
	}   
	
	function addPOS(lat, lng, title){
		var pointLatlng = new google.maps.LatLng(lat, lng);
		var marker3 = new google.maps.Marker( {
			position :pointLatlng,
			map :map,
			title :title
		});

		var contentString = '<div id="bodyContent">'+title+'</div>';
		
		var infowindow = new google.maps.InfoWindow( {
			content :contentString
		});

		google.maps.event.addListener(marker3, 'click', function() {
			infowindow.open(map, marker3);
		});
	}

	function getPOS(){
		var request = createXMLHttpRequest();
		
		request.open('get','./AJAX?todo=getPOS&scheduleId=<%=scheduleId%>',false);
		request.send(null);
		var posList = eval("(" + request.responseText + ")");

		var start;
		var end;
		var length = posList.pos.length;
		if(length != 0){
			start = new google.maps.LatLng(posList.pos[0].lat, posList.pos[0].lng);
			end = new google.maps.LatLng(posList.pos[length-1].lat, posList.pos[length-1].lng);
		}

		var waypts = [];
		for( var i=1; i<length-1; i++){
			var pos = posList.pos[i];
			var wayPoint = new google.maps.LatLng(posList.pos[i].lat, posList.pos[i].lng);
			waypts.push({
	          	location:wayPoint,
	          	stopover:true
      		});
		}

		var req = {
			   	origin:start, 
			    destination:end,
			    waypoints: waypts,
			    optimizeWaypoints: false,
			    travelMode: google.maps.DirectionsTravelMode.DRIVING
			};
			directionsService.route(req, function(result, status) {
				if (status == google.maps.DirectionsStatus.OK) {
				    directionsDisplay.setDirections(result);
				}
			});
	}
	
	function showPanel(){
		document.getElementById("directionsPanel").style.visibility = 'visible';
	}

</script>
</head>
<body onload="init()">
<!--table style="width: 100%; height: 100%">
	<tr>
		<td id="map_canvas" width="80%">
		</td>
		<td id="incidentList" width="20%">
		</td>
	</tr>
</table-->
<table>
	<div id="map_canvas" style="float:left;width:100%; height:90%;"></div> 
	<hr/>
	<div id="directionsPanel" style="float:top;width:100%;height:10%; ">
		<p>Total Distance: <span id="total"></span></p> 
	</div>
	<!--div id="showPanel" style="float:right;width:100%;height:10%;">
		<input onclick="showPanel()" value="Show Panel" type="button"/>
	</div-->
</body>
</html>